﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>普通监听</title>
    <meta charset="utf-8" />
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="Controller" class="container-fluid">
    <textarea type="text" ng-model="Value" style="height:2em;width:100%;"></textarea>
    <div>        
        {{InputDescription}}
    </div>
    <script type="text/javascript">

        function Controller($scope) {
            $scope.Value = "";
            var that = parent.angular.element(document)
                    .find("body").scope();
            $scope.$watch("Value", function () {
                //必须使用element(document)去查找元素，直接使用element("body")，不管是否引用jQuery都会报错
                
                if (that != null) {
                    that.InputValue = $scope.Value;
                    if ($scope.Value.length > 0 && $scope.Value.length % 3 == 0) {
                        that.InputDescription = "生效了！";
                        that.$apply();
                        return;
                    };
                };

                $scope.InputDescription = ["输入3倍的字符，才会生效！当前输入了:", $scope.Value.length, "个字符，还差:", 3 - $scope.Value.length % 3, "个字符"].join("");
            });
        };

        var myApp = angular.module("myApp", []);
        myApp.controller("Controller", Controller);
    </script>
</body>
</html>
